<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <!-- 一级组件 -->
    <template id="oneMenu">
        <div>
            <h1>理事会</h1>
            <router-link to="/lsh/msc">秘书处</router-link>
            <router-view></router-view>
        </div>
    </template>
    <!-- 二级组件 -->
    <template id="twoMenu">
        <div>
            <h1>秘书处</h1>
            <router-link to="/lsh/msc/xs">下属部门</router-link>
            <router-view></router-view>
        </div>
    </template>
    <!-- 三级组件 -->
    <template id="threeMenu">
        <div>
            <ul>
                <li>
                    项目部
                </li>
                <li>宣传部</li>
                <li>综合部</li>
                <li>财务部</li>
                <li>筹款部</li>
            </ul>
        </div>
    </template>
    <template></template>
</body>
</html>

<script type="module">
    import {} from './js/vue.js';
    import {} from './js/vue-router.js';
    var oneMenu ={
        template:'#oneMenu'
    }
    var twoMenu ={
        template:'#twoMenu'
    }
    var threeMenu ={
        template:'#threeMenu'
    }
    var router = new VueRouter({
        routes:[
            // 一级路由
            {path:'/',
             component:oneMenu,
             children:[
                // 二级路由
                {path:'/lsh/msc',
                 component:twoMenu,
                 children:[
                    // 三级路由
                    {path:'/lsh/msc/xs',component:threeMenu}
                 ]
                },
             ]
            },
            // {path:'/lsh/msc',component:twoMenu},
            // {path:'/lsh/msc/xs',component:threeMenu}
        ]
    })
    
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        methods:{
            // 自定义方法
        },
        computed:{
            // 计算属性
        },
        router
    })
</script>